<template>
    <div id="app">
        <div style="text-align: center;margin-bottom: 30px">
            <el-button type="primary" @click="foldList = []" :disabled="foldList.length === 0" size="small"
                       style="margin-right: 30px">全部展开
            </el-button>
            <el-button type="primary" @click="foldList = foldAllList" :disabled="foldList === foldAllList" size="small">
                全部折叠
            </el-button>
        </div>
        <el-table
                :data="tableListData"
                :row-style="toggleDisplayTr"
                border stripe
                class="init_table">
            <el-table-column
                    align="center"
                    width="55"
                    type="index"
                    label="序号">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="55"
                    type="selection">
            </el-table-column>
            <el-table-column
                    label="权限名称"
                    min-width="200"
                    show-overflow-tooltip
                    align="left">
                <template slot-scope="scope">
                    <p :style="`margin-left: ${scope.row.__level * 30}px;margin-top:0;margin-bottom:0`">
                        <i @click="toggleFoldingStatus(scope.row)" :class="toggleFoldingClass(scope.row)"></i>
                        {{scope.row.Name}}</p>
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    width="90"
                    prop="__level"
                    label="层级">
            </el-table-column>
            <el-table-column
                    align="left"
                    prop="__identity"
                    label="节点标识">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="80"
                    show-overflow-tooltip
                    label="图标">
                <template slot-scope="scope">
                    <span>{{scope.row.Class}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="PId"
                    width="100"
                    label="Action">
            </el-table-column>

            <el-table-column
                    align="center"
                    min-width="200"
                    label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini">编辑</el-button>
                    <el-button type="danger" size="mini">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import data from "./data"
    import Vue from 'vue'

    export default {
        data: () => ({
            tableListData: [],
            foldList: [],
            checkAll: false,
            isIndeterminate: true
        }),
        computed: {
            foldAllList() {
                return this.tableListData.map(x => x.__identity)
            },
        },
        methods: {
            toggleFoldingStatus(params) {
                this.foldList.includes(params.__identity) ? this.foldList.splice(this.foldList.indexOf(params.__identity), 1) : this.foldList.push(params.__identity)
            },
            toggleDisplayTr({row, index}) {
                for (let i = 0; i < this.foldList.length; i++) {
                    let item = this.foldList[i];
                    if (row.__family.includes(item) && row.__identity !== item) return 'display:none;'
                }
                return ''
            },
            toggleFoldingClass(params) {
                return params.Children.length === 0 ? 'permission_placeholder' : (this.foldList.indexOf(params.__identity) === -1 ? 'el-icon-caret-bottom' : 'el-icon-caret-right')
            },
            formatConversion(parent, children, index = 0, family = [], elderIdentity = 'x') {
                if (children.length > 0) {
                    children.map((x, i) => {
                        Vue.set(x, '__level', index);
                        Vue.set(x, '__family', [...family, elderIdentity + '_' + i])
                        Vue.set(x, '__identity', elderIdentity + '_' + i);
                        parent.push(x);
                        if (x.Children.length > 0) this.formatConversion(parent, x.Children, index + 1, [...family, elderIdentity + '_' + i], elderIdentity + '_' + i)
                    })
                }
                return parent
            }
        },
        created() {
            this.tableListData = this.formatConversion([], data)
        }
    }
</script>

<style scoped>
    i:hover {
        cursor: pointer;
    }
</style>

